<!--
* description: 用于在表格操作列中显示 -- 或 图标 支持 rowFileds
* author: wangml
* createdDate: 2021/1/14
* usage：
          {
            compKey: 'propKey3',
            component: () => import('@/components/ve/showIcon.vue'),
            rowFileds: 'show:OrderStatus-尾款已支付',  // 尾款已支付就 显示 -- 或 图标
            // icon: 'el-icon-success'  // 设置了 就显示对应的图标，默认显示 --
          },
-->
<template>
  <div v-if="isShow" class="line-container" :style="{height: tableRowH}">
    <slot>
      <template v-if="icon">
        <i :class="icon"></i>
      </template>
      <template v-else>
        <div class="line" />
        <div class="line" />
      </template>
    </slot>
  </div>
</template>

<script>
import { tableRowHeight } from '@/styles/variables.scss'
export default {
  name: 'ShowIcon',
  props: {
    curTableRow: { type: Object, default: () => ({}) },
    rowFileds: { type: String, default: '' },
    icon: { type: String, default: ''}
  },
  data() {
    return {
      isShow: false,
      tableRowH: tableRowHeight
    }
  },
  mounted() {
    this.setIsShow()
  },
  methods: {
    setIsShow() {
      if (this.rowFileds && this.rowFileds.includes('show:')) {
        const relationFieldsStr = this.rowFileds.split('show:')[1]
        const controlArr = relationFieldsStr.split('-')
        const dependencyField = controlArr.shift()
        if (this.curTableRow.hasOwnProperty(dependencyField)) {
          if (controlArr.includes(this.curTableRow[dependencyField])) {
            this.isShow = true
          }
        }
      }
    }
  }

}
</script>

<style lang="scss" scoped>
  div.line-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .line {
      margin: 0 1px;
      width: 12%;
      max-width: 14px;
      height: 2px;
      background-color: rgba(0, 0, 0, .9);
    }
  }
</style>
